export default {
  data() {
    return {
      rolesList: [],
      // 添加角色相关的属性
      addDialogFormVisible: false,
      addForm: {
        roleName: "",
        roleDesc: ""
      },
      rules: {
        roleName: [
          { required: true, message: "角色名称必填", trigger: "blur" }
        ],
        roleDesc: [{ required: true, message: "角色描述必填", trigger: "blur" }]
      },
      editDialogFormVisible: false,
      editForm: {
        roleName: "",
        roleDesc: ""
      },
      // 分配权限数据
      rightDialogFormVisible: false,
      rightsTreeData: [],
      defaultProps: {
        children: "children",
        label: "authName"
      },
      checkedIdArr: [],
      rightsRoleId: null
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 打开分配权限对话框
    async openRightsDialog(row) {
      const {
        data: { data, meta }
      } = await this.$http.get("rights/tree");
      if (meta.status !== 200) return this.$message.error("权限获取失败");
      this.rightsTreeData = data;
      // 选中已有权限
      let arr = [];
      row.children.forEach(item => {
        item.children.forEach(subItem => {
          subItem.children.forEach(lastItem => {
            arr.push(lastItem.id);
          });
        });
      });
      this.checkedIdArr = arr;
      this.rightsRoleId = row.id;
      // 再打开对话框
      this.rightDialogFormVisible = true;
    },
    // 分配权限
    async disRights() {
      // 获取全选权限id
      const checkedArr = this.$refs.tree.getCheckedKeys();
      // 获取半选权限id
      const halfCheckedArr = this.$refs.tree.getHalfCheckedKeys();
      const arr = [...checkedArr, ...halfCheckedArr];
      // 角色id
      const {
        data: { meta }
      } = await this.$http.post(`roles/${this.rightsRoleId}/rights`, {
        rids: arr.join(",")
      });
      if (meta.status !== 200) return this.$message.error("角色权限分配失败");
      this.rightDialogFormVisible = false;
      this.getData();
      this.$message.success("角色权限分配成功");
    },
    // 删除单个权限
    delRights(row, rightsId) {
      this.$confirm("此操作将永久删除该权限, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          // 进行删除
          const {
            data: { data, meta }
          } = await this.$http.delete(`roles/${row.id}/rights/${rightsId}`);
          if (meta.status !== 200)
            return this.$message.error("删除角色权限失败");
          row.children = data;
        })
        .catch(() => null);
    },
    // 编辑用户
    openEditDialog(row) {
      this.editDialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["editForm"].resetFields();
        // 填充数据
        this.editForm.roleName = row.roleName;
        this.editForm.roleDesc = row.roleDesc;
        this.editForm.id = row.id;
      });
    },
    editRole() {
      this.$refs.editForm.validate(async valid => {
        if (valid) {
          const {
            data: { meta }
          } = await this.$http.put(`roles/${this.editForm.id}`, {
            roleName: this.editForm.roleName,
            roleDesc: this.editForm.roleDesc
          });
          if (meta.status !== 200) return this.$message.error("编辑角色失败");
          // 成功
          (this.editDialogFormVisible = false), this.getData();
        }
      });
    },
    // 删除业务
    delRole(roleId) {
      // 确认框
      this.$confirm("此操作将永久删除该角色, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          // 删除请求
          // 需要用户id
          const {
            data: { meta }
          } = await this.$http.delete(`roles/${roleId}`);
          // 失败
          if (meta.status !== 200) return this.$message.error("删除角色失败");
          // 成功
          this.getData();
        })
        .catch(() => null);
    },
    // 打开添加对话框
    openAddDialog() {
      this.addDialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["addForm"].resetFields();
      });
    },
    // 添加请求
    addRole() {
      // 1. 校验整个表单
      this.$refs.addForm.validate(async valid => {
        if (valid) {
          // 2. 知道提交的数据有哪些？roleName roleDesc ---> addForm
          const {
            data: { meta }
          } = await this.$http.post("/roles", this.addForm);
          if (meta.status !== 201) return this.$message.error("添加角色失败");
          // 3. 成功
          this.getData();
          this.addDialogFormVisible = false;
        }
      });
    },
    async getData() {
      const {
        data: { data, meta }
      } = await this.$http.get("roles");
      if (meta.status !== 200) return this.$message.error("获取角色列表失败");
      this.rolesList = data;
    }
  }
};
